<template>
  <div class="bg-white">
    <DataType ref="dataType" @ok="onSetDataType"></DataType>
    <a-row :gutter="10">
      <a-col :span="5">
        <div class="wfull left" :style="{height:`${winHeight-140}px`}">
          <div class="title">空间信息</div>
          <div class="pd5 mb10">
            <div class="pos-rlt pd5" style="border:dashed 1px #e6e6e6;">
              <div class="ltag-success">
                <div class="name">{{ space.status }}</div>
              </div>
              <div>空间名称：<span class="link">{{ space.name }}</span></div>
              <div>空间容量：{{ space.capacity }}MB</div>
              <div>已使用：{{ space.used }}MB</div>
              <a-progress :percent="30"></a-progress>
            </div>
          </div>
          <div class="title">数据目录</div>
          <div class="scroll" :style="{height:`${winHeight-400}px`}">
            <div class="pd5">
              <a-tree
                :selected-keys="selectedFolderKeys"
                :tree-data="folders"
                show-icon
                @select="onFolderSelect"
              >
                <a-icon slot="folder" type="folder" />
              </a-tree>
            </div>
          </div>
        </div>
      </a-col>
      <a-col :span="19">
        <div v-if="dataTypeArr&&dataTypeArr.length>0">
          <a-tabs v-model="tab">
            <a-tab-pane v-for="d in dataTypeArr" :key="d.key" :tab="d.name"></a-tab-pane>
            <div slot="tabBarExtraContent" class="pr10">
              <div v-if="getDataType()===1">表单编码：form_test</div>
              <div v-if="getDataType()===2">只允许上传.png，每个文件大小不超过1MB</div>
            </div>
          </a-tabs>
          <ZgNewPage
            ref="page"
            :extraHeight="350"
            :pageOpt="{showSearchBtn:true,showRefreshBtn:true,showConditionBtn:true}"
            :batchBtns="batchBtns"
            :dataBtns="dataBtns"
            :conditions="conditions"
            addBtnName="新增数据"
            addBtnIcon="plus-circle"
            @search="onSearch">
            <template slot="columns">
              <a-table-column
                v-for="(h,i) in headers"
                :key="`column${i}`"
                :width="h.width===0 ? 'auto' : h.width"
                :title="h.label">
                <template slot-scope="record">
                  {{ record[h.code] }}
                </template>
              </a-table-column>
            </template>
          </ZgNewPage>
        </div>
        <div v-else class="flx-c">
          <ZgEmpty description="请设置数据类型" class="cpt" @click.native="toSetDataType"></ZgEmpty>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import DataType from './DataType'
export default {
  components: {
    DataType
  },
  data () {
    return {
      space: {
        name: '空间名称',
        code: '空间编码',
        capacity: 50,
        used: 12.3,
        status: '正常'
      },
      tab: '0',
      dataTypeArr: [],
      selectedFolderKeys: [],
      folders: [
        {
          title: '磅房数据',
          key: '0-0',
          slots: { icon: 'folder' },
          children: [
            {
              title: '公路磅房',
              key: '0-0-0',
              slots: { icon: 'folder' },
              children: [
                { title: '李家庄', key: '0-0-0-0', slots: { icon: 'folder' } },
                { title: '霍州', key: '0-0-0-1', slots: { icon: 'folder' } },
                { title: '小店', key: '0-0-0-2', slots: { icon: 'folder' } }
              ]
            },
            {
              title: '铁路磅房',
              key: '0-0-1',
              slots: { icon: 'folder' },
              children: [
                { title: '0-0-1-0', key: '0-0-1-0', slots: { icon: 'folder' } },
                { title: '0-0-1-1', key: '0-0-1-1', slots: { icon: 'folder' } },
                { title: '0-0-1-2', key: '0-0-1-2', slots: { icon: 'folder' } }
              ]
            }
          ]
        },
        {
          title: '皮带数据',
          key: '0-1',
          slots: { icon: 'folder' },
          children: [
            { title: '内调数据', key: '0-1-0-0', slots: { icon: 'folder' } },
            { title: '外销数据', key: '0-1-0-1', slots: { icon: 'folder' } }
          ]
        }
      ],
      headers: [
        { code: 'name', label: '姓名', width: 0, isShow: true, sort: 0 },
        { code: 'sex', label: '性别', width: 0, isShow: true, sort: 0 },
        { code: 'age', label: '年龄', width: 0, isShow: true, sort: 0 }
      ],
      conditions: [
        { code: 'select', compType: '下拉选择', label: '性别', defaultVal: '', extra: { 下拉选项: [{ value: '1', label: '男111s' }, { value: '2', label: '女' }] } },
        { code: 'birth', compType: '日期区间', label: '生日', defaultVal: ['', ''] },
        { code: 'age', compType: '整数区间', label: '年龄', defaultVal: [0, 100] },
        { code: 'birth1', compType: '日期', label: '生日1', defaultVal: '2025-05-23' },
        { code: 'age1', compType: '整数', label: '年龄1', defaultVal: 0 },
        { code: 'name', compType: '单行文本', label: '姓名', defaultVal: '' },
        { code: 'political', compType: '字典', label: '政治面貌', defaultVal: '', extra: { 字典类型: 'political' } },
        { code: 'is_use', compType: '布尔', label: '启用1', defaultVal: 'false' },
        { code: 'other1', compType: '单行文本', label: 'other1', defaultVal: '' },
        { code: 'other2', compType: '单行文本', label: 'other2', defaultVal: '' },
        { code: 'other3', compType: '单行文本', label: 'other3', defaultVal: '' },
        { code: 'other4', compType: '单行文本', label: 'other4', defaultVal: '' },
        { code: 'other5', compType: '单行文本', label: 'other5', defaultVal: '' },
        { code: 'other6', compType: '单行文本', label: 'other6', defaultVal: '' },
        { code: 'other7', compType: '单行文本', label: 'other7', defaultVal: '' }
      ],
      batchBtns: [
        { key: 1, label: '批量删除' },
        { key: 2, label: '批量修改' },
        { key: 3, label: '数据排序' },
        { key: 4, label: 'Excel导入' },
        { key: 5, label: 'Excel导出' }
      ],
      dataBtns: [
        { key: 1, name: '删除', type: 'primary', icon: 'fa-trash', isShow: () => { return true } },
        { key: 2, name: '修改', type: 'link', icon: 'fa-pencil', isShow: () => { return true } },
        { key: 3, name: '附件', type: 'link', icon: 'fa-file', isShow: () => { return true } }
      ]
    }
  },
  watch: {
  },
  mounted () {
  },
  methods: {
    getDataType () {
      const arr = this.dataTypeArr.filter(t => {
        return t.key === this.tab
      })
      if (arr.length === 0) {
        return 1
      } else {
        return arr[0].type
      }
    },
    onSearch (param) {
      // 加载表头
      const list = [
        { key: '1', id: '1', name: 'haha', sex: '男', age: 18, isUse: true },
        { key: '2', id: '2', name: 'zxb', sex: '男', age: 18, isUse: true },
        { key: '3', id: '3', name: 'zxb', sex: '男', age: 18, isUse: true },
        { key: '4', id: '4', name: 'zxb', sex: '男', age: 18, isUse: true },
        { key: '5', id: '5', name: 'zxb', sex: '男', age: 18, isUse: true }
      ]
      this.$refs.page.endSearch({
        total: list.length,
        list: list
      })
    },
    onFolderSelect (selectedKeys, info) {
      console.log('onSelect', info)
      this.selectedFolderKeys = selectedKeys
    },
    toSetDataType () {
      this.$refs.dataType.open()
    },
    onSetDataType (param) {
      const arr = JSON.parse(param)
      this.tab = arr[0].key
      this.dataTypeArr = arr
    }
  }
}
</script>

<style lang="scss" scoped>
.left{
  border-right:solid 1px #e6e6e6;
  .title{
    //background:#1890ff;color:#fff;
    padding:10px;
    border-bottom:solid 1px #e6e6e6;
  }
}
</style>
